<!-- 商家销量统计的横向柱状图 -->
<template>
	<div id="com-container">
		<div class="com-chart" ref="seller_ref">

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				chartInstance: null,
				allData: null, //服务器返回的数据
				currentPage: 1, //当前显示的页数
				totalPage: 0, //一共有多少页
				timerId: null //定时器名称
			}

		},
		mounted() {
			this.initChart()
			this.getData()
			//屏幕监听事件
			window.addEventListener('resize', this.screenAdapter)
			//在页面加载完成的时候 主动进行屏幕的适配
			this.screenAdapter()

		},
		destroyed() { //清除定时器
			clearInterval(this.timerId)
			//
			window.removeEventListener('resize',this.screenAdapter)
		},
		methods: {
			//初始化echarInstance对象
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.seller_ref, 'chalk') //第二个参数主题的使用
				//对图表初始化配置的控制
				const initOption = {
					title: {
						text: '▎商家销售统计',
						left: 20, //标题的位置
						top: 20

					},
					grid: { //(坐标轴的位置)改变图表的位置
						top: '20%',
						left: '3%',
						right: '6%',
						bottom: '3%',
						containLabel: true //为true时包含文字一起改变
					},
					xAxis: {
						type: 'value'
					},
					yAxis: {
						type: 'category',

					},
					tooltip: { //工具配置
						//配置状态图的背景
						trigger: 'axis', //当鼠标触发x轴时显示背景
						axisPointer: {
							type: 'line',
							z: 0, //设置为0后 背景就不会把状态图原来样式遮挡住了
							lineStyle: {
								color: '#2D3443' //背景颜色
							}
						}
					},
					series: [{
						type: 'bar',
						label: {
							show: true, //显示文字 默认显示位置在柱状图内部
							position: 'right', //改变显示位置  在右边
							textStyle: { //文字的样式
								color: 'white'
							}
						},
						itemStyle: { //控制柱状图的样式
							//控制柱状图的圆角  33分别代表左上角和右下角
							//柱状图颜色渐变设置
							//前面四个点控制颜色渐变的方向  从左到右
							//后面数组指明不同百分比之下的颜色的值
							color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
								//0%状态下的颜色值
								{
									offset: 0,
									color: '#5052EE'
								},
								//100%状态下的颜色值
								{
									offset: 1,
									color: '#AB6EE5'
								}
							])

						}

					}, ]
				}
				//可以多次设置setOption  它是相互整合的过程  不会覆盖之前的设置
				this.chartInstance.setOption(initOption)
				//对图表对象进行鼠标事件的监听  鼠标移上去时 清除定时器
				this.chartInstance.on('mouseover', () => {
					clearInterval(this.timerId)
				})
				//对图表对象进行鼠标事件的监听  鼠标离开时 恢复定时器
				this.chartInstance.on('mouseout', () => {
					this.startInterval()
				})
			},
			// 获取服务器的数据
			async getData() {
				// http://127.0.0.1:8000/api/seller
				const {
					data: ret
				} = await this.$http.get('seller')
				
				this.allData = ret
				//对数据进行排序
				this.allData.sort((a, b) => {
					return a.value - b.value //从小到大进行排序
				})
				//每5个元素显示一页  计算总的页数
				this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1
				this.updateChart()
				this.startInterval() //启动定时器
			},
			//更新图表
			updateChart() {
				//获取第一个值的索引
				const start = (this.currentPage - 1) * 5 //0
				//获取最后一个索引
				const end = this.currentPage * 5 //5
				//用slice函数获取第一个到最后一个范围  进行分页
				const showData = this.allData.slice(start, end)
				//获取名称
				const sellerNames = showData.map((item) => {
					return item.name
				})
				//获取值
				const sellerValue = showData.map((item) => {
					return item.value
				})
				const dataOption = { //因为前面都配置过 这里只对数据行配置 
					yAxis: {
						data: sellerNames
					},
					series: [{

						data: sellerValue,
					}]
				}
				this.chartInstance.setOption(dataOption)

			},
			startInterval() { //定义一个定时器  不断更新图表
				if (this.timerId) { //先进行判断是否有定时器
					clearInterval(this.timerId)
				}
				this.timerId = setInterval(() => {
					this.currentPage++
					if (this.currentPage > this.totalPage) {
						this.currentPage = 1
					}
					this.updateChart()
				}, 3000)
			},
			screenAdapter() { //屏幕适配  当浏览器发生变化时 图表也随之改变
				//获取标题的大小
				const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6 //3.6是试出来比较合适的一个值
				const adapterOption = { //屏幕适配相关的一些配置
					title: {
						textStyle: {
							fontSize: titleFontSize
						}
					},
					tooltip: { //工具配置
						axisPointer: {
							lineStyle: {
								width: titleFontSize,
							}
						}
					},
					series: [{

						barWidth: titleFontSize, //控制柱状图的宽度

						itemStyle: { //控制柱状图的样式
							//控制柱状图的圆角  33分别代表左上角和右下角
							barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],

						}

					}]
				}
				this.chartInstance.setOption(adapterOption)

				//手动调用图表对象的resize  才能产生效果
				this.chartInstance.resize()
			}

		}
	}
</script>

<style scoped="scoped">
</style>
